<template>
    <div class="recruitmentTipsContainer">
        <h1>Anonymous tips from the recruitment team</h1>
        <div class="tips">
            <div
                v-for="item in tips"
                :key="item.id"
                class="tip"
                @click="toggleTip(item.id)"
            >
                <div
                    v-html="item.title"
                    class="tipTitle"
                    :class="{ expanded: expandedTips.has(item.id) }"
                ></div>
                <div
                    v-html="item.text"
                    class="tipText"
                    :class="{ expanded: expandedTips.has(item.id) }"
                ></div>
            </div>
        </div>
    </div>
</template>

<script setup>
import {reactive, ref} from "vue";

const tips = reactive([
    {
        id: '001',
        title: 'How do I know what is the last day to apply for an open position on the website?',
        text: '<p>You don\'t, and neither do we! Positions are open for as long as it takes to find the best person to fill the role. So, if you see a job opening here on our website, it shouldn\'t be too late to apply. On the other hand, we are constantly reviewing and processing, which makes applying as soon as possible a good idea!  Now, for the rare instances where we have a predefined schedule, you\'ll find the application deadline in bold letters on the job description.</p>'
    }, {
        id: '002',
        title: 'I haven\'t heard back from you in a while!',
        text: '<p>Waiting is frustrating, especially when applying for a job. We are sorry for the uncomfortable sensation and tedious uncertainty our delay might have caused! Our team does its best to review applications quickly (yet meticulously) and keep candidates up-to-date during the recruitment process, which sometimes can last longer than we\'d ideally want it to. As we design and tweak it, we seek to balance speed with thoroughness. Thank you for understanding!</p>'
    }, {
        id: '003',
        title: 'Can I send an open application?',
        text: '<p>We\'ve given all the open positions on our website a thorough consideration before posting them. They are the roles we are looking to fill at this time. In our attempt to keep our team focused and provide exceptional candidate experience, we\'ve decided not to offer the possibility of sending us open applications. If you do not see a role that suits you, please come back, and might we add: follow us on</p>'
    }, {
        id: '004',
        title: 'What kind of portfolio do you want to see?',
        text: '<p>Firstly, we love portfolios, art, and artists! Secondly, below are some ideas that hopefully will help you communicate with us through your portfolio.</p><br>' +
            '<p>If you have a generalist background but are applying for a specific role (e.g., character or environment art), showcase the pieces that fit the role. Putting together a more focused portfolio, especially if your work traverses various areas, will help the reviewers see what they are looking for.</p><br>' +
            '<p>Be mindful and fight the urge to "I\'ll put in this one piece still and maybe this one, too." We encourage you to focus on including the one you are proud of, which shows what you are capable of now.</p><br>' +
            '<p>P.S. We appreciate fan art as much as professional work!</p>'
    }, {
        id: '005',
        title: 'I don\'t live in the country where this position is based. Can I still apply?',
        text: '<p>Yes, of course! Firstly, for some roles, even if the position is based in a certain city, the team might be open to remote work. You\'ll see this mentioned in the job description. Secondly, for roles that require a physical presence, we arrange travel and accommodation for onsite interviews, so we get to meet you in person, and you have the opportunity to visit the office and the city you might find yourself living in. If you get hired and want to join Supercell, our Global Mobility team helps you and your family relocate and settle into your new life. </p>'
    }, {
        id: '006',
        title: 'Can I join you but still work remotely from my home country if I cannot relocate?',
        text: '<p>The short answer is: It depends. The longer answer is that, Depending on the team\'s decision and the role in question, it may be possible to join us and work remotely. As of now, it\'s possible to work remotely from the countries where we have an office, as well as from Denmark, Sweden, Germany, and Spain.</p>'
    }, {
        id: '007',
        title: 'What if I have questions about the position? Who can I contact?',
        text: '<p>We do our best to provide as much information as possible, both here on the website and in the job description. Once you\'ve sent your application and received a confirmation email, hang tight! You\'ll hear back from our team soon. If you make it to the next step, we are happy to answer your questions.</p>'
    }, {
        id: '008',
        title: 'Do you provide internships?',
        text: '<p>We do - every now and then! Keep your eyes open as we post opportunities in our job listings as they pop up. You might also fancy reading about the Level Up program we\'ve organized in the past.</p>'
    }, {
        id: '009',
        title: 'Can I apply again in the future? If I get rejected now, when can I apply again?',
        text: '<p>You betcha! You wouldn\'t be the first one of us. While the absolute number of times you apply doesn\'t count, what matters is whether you have the skills we seek.</p>'
    }, {
        id: '010',
        title: 'Can I get feedback on why I wasn\'t chosen?',
        text: '<p>Providing an exceptional candidate experience is part of our DNA, and we recognize feedback is key. Given the high volume of applications, our capacity to provide thorough feedback is limited and depends on how far you are in the process of progress.</p>'
    }, {
        id: '011',
        title: 'Are you an AI?',
        text: '<p>"I\'m afraid I can\'t answer that, Dave." While the possibilities of AI and its related abbreviations are immense, we are here for you as one human being to another. You won\'t be disqualified because your CV didn\'t pass an automatic filter or because an agent told us so. We go through all applications manually. While you might wait a bit longer, at least you\'ll know there was a real person on the other side!</p>'
    }
]);

const expandedTips = ref(new Set());

const toggleTip = (id) => {
    if (expandedTips.value.has(id)) {
        expandedTips.value.delete(id);
    } else {
        expandedTips.value.add(id);
    }
};
</script>

<style scoped>
.recruitmentTipsContainer {
    padding: 80px 0;
    margin: 0 auto;
    background-color: #f3f3f3;
}

.recruitmentTipsContainer h1 {
    text-align: center;
    font-size: 44px;
    font-weight: bolder;
    text-transform: uppercase;
    margin-bottom: 32px;
}

.tips {
    width: 50%;
    margin: 0 auto;
}

.tip {
    background-color: #fff;
    margin-bottom: 20px;
    padding-left: 32px;
    padding-right: 64px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.tip:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* 使用 :deep 适配 v-html 内容 */
:deep(.tipTitle) {
    padding: 27px 0;
    font-size: 20px;
    color: rgb(45, 133, 243);
    font-weight: bolder;
    text-transform: uppercase;
    line-height: 1.7;
    position: relative;
    transition: color 0.3s ease;
}

:deep(.tipTitle::before),
:deep(.tipTitle::after) {
    content: '';
    position: absolute;
    top: 2.7rem;
    right: -5%;
    background: #2d85f3;
    width: 12px;
    height: 2px;
}

:deep(.tipTitle::before) {
    transform: rotate(90deg);
}

:deep(.tipTitle.expanded::before) {
    transform: rotate(0deg);
}

:deep(.tipText) {
    font-size: 18px;
    line-height: 1.5;
    overflow: hidden;
    max-height: 0;
    padding-bottom: 0;
    transition: max-height 0.4s ease, padding-bottom 0.4s ease;
}

:deep(.tipText.expanded) {
    max-height: 500px; /* 根据内容长度调整 */
    padding-bottom: 36px;
}
</style>
